<template>
  <transition name="slideFromBottom" v-if="isshow">
    <div class="cart">
      <div class="flex desc">
        <div class="flex1">
          <img v-bind:src="cart.thumbImg"/>
        </div>
        <div class="flex2">
          <p class="title">{{cart.title}}</p>
          <p class="price">￥{{cart.price}}</p>
        </div>
        <div class="flex3" @click="closeDialog()">
          <i class="icon icon-close"></i>
        </div>
      </div>
      <div class="number">
        <p>购买数量</p>
        <div class="flex">
          <div class="flex1" @click="deleteNumber()">
            <p> - </p>
          </div>
          <div class="flex2">
            <p>{{cartNumber}}</p>
          </div>
          <div class="flex1" @click="addNumber()">
            <p> + </p>
          </div>
        </div>
      </div>
      <button class="custom" style="width: 100%;" @click="placeOrder()">下一步</button>
    </div>
  </transition>


</template>
<script>
  import {setLocalstorage} from '../../common/js/common'
  export default ({
    props: {
      'isshow': {
        type: Boolean,
        default: false
      },
      'cart': {
        type: Object
      }
    },
    data () {
      return {
        'cartNumber': 1
      }
    },
    created () {
    },
    mounted () {
    },
    methods: {
      deleteNumber () {
        this.cartNumber <= 1 ? this.cartNumber = 1 : this.cartNumber--
      },
      addNumber () {
        this.cartNumber >= this.cart.stock ? this.cartNumber = this.cart.stock : this.cartNumber++
      },
      closeDialog () {
        this.$emit('closeDialog')
      },
      placeOrder () {
        let cartlist = {...this.cart, 'cartnumber': this.cartNumber}
        setLocalstorage('cartlist', cartlist)
        this.$router.push({name: 'placeOrder', params: {}})
        /* this.$store.commit('addGoodsToCart', {
         'cartlist': cartlist
         }) */
      }
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/redifined.styl"
  @import "./cart.styl"
</style>
